<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>TAO | CRM 管理</title>

    <link rel="stylesheet" href="/static/css/backend-plugin.min.css">
    <link rel="stylesheet" href="/static/css/backend.css">
</head>
<body class="  ">
<!-- loader Start -->
<div id="loading">
    <div id="loading-center">
    </div>
</div>
<!-- loader END -->
<!-- Wrapper Start -->
<div class="wrapper">
    <div class="iq-sidebar  sidebar-default  ">
        <div class="iq-sidebar-logo d-flex align-items-end justify-content-between">
            <a href="" class="header-logo">
                <img src="/static/picture/logo.png" class="img-fluid rounded-normal light-logo" alt="logo">
                <img src="/static/picture/logo-dark.png" class="img-fluid rounded-normal d-none sidebar-light-img"
                     alt="logo">
                <span>TAO</span>
            </a>
            <div class="side-menu-bt-sidebar-1">
                <svg xmlns="http://www.w3.org/2000/svg" class="text-light wrapper-menu" width="30" fill="none"
                     viewbox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </div>
        </div>
        <div class="data-scrollbar" data-scroll="1">
            <nav class="iq-sidebar-menu">
                <ul id="iq-sidebar-toggle" class="side-menu">
                    <li class="active sidebar-layout">
                        <a href="/page/main" class="svg-icon">
                            <i class="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                     stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                                </svg>
                            </i>
                            <span class="ml-2">主页</span>
                            <p class="mb-0 w-10 badge badge-pill badge-primary">99+</p>
                        </a>
                    </li>
                    <li class="px-3 pt-3 pb-2 ">
                        <span class="text-uppercase small font-weight-bold">客户管理</span>
                    </li>
                    <li class=" sidebar-layout">
                        <a href="/page/customer" class="svg-icon ">
                            <i class="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                     stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                                </svg>
                            </i>
                            <span class="ml-2">基本信息</span>
                        </a>
                    </li>
                    <li class=" sidebar-layout">
                        <a href="/page/lostCustomer" class="svg-icon">
                            <i class="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                     stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
                                </svg>
                            </i>
                            <span class="ml-2">流失客户管理</span>
                        </a>
                    </li>
                    <li class="px-3 pt-3 pb-2">
                        <span class="text-uppercase small font-weight-bold">用户</span>
                    </li>
                    <li class="sidebar-layout">
                        <a href="#app1" class="collapsed svg-icon" data-toggle="collapse" aria-expanded="false">
                            <i>
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                     stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                                </svg>
                            </i>
                            <span class="ml-2">用户管理</span>
                            <svg xmlns="http://www.w3.org/2000/svg" class="svg-icon iq-arrow-right arrow-active"
                                 width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M9 5l7 7-7 7"></path>
                            </svg>
                        </a>
                        <ul id="app1" class="submenu collapse" data-parent="#iq-sidebar-toggle">
                            <li class=" sidebar-layout">
                                <a href="/page/contactChange" class="svg-icon">
                                    <i class="">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none"
                                             viewbox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
                                        </svg>
                                    </i><span class="">修改密码</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="px-3 pt-3 pb-2">
                        <span class="text-uppercase small font-weight-bold">营销管理</span>
                    </li>
                    <li class=" sidebar-layout">
                        <a href="/page/marking" class="svg-icon">
                            <i class="">
                                <svg class="svg-icon" id="iq-chart-1" width="18" xmlns="http://www.w3.org/2000/svg"
                                     fill="none" viewbox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M8 13v-1m4 1v-3m4 3V8M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
                                          style="stroke-dasharray: 96, 116; stroke-dashoffset: 0;"></path>
                                </svg>
                            </i>
                            <span class="ml-2">营销机会管理</span>
                        </a>
                    </li>
                    <li class=" sidebar-layout">
                        <a href="/page/customerPlan" class="svg-icon">
                            <i class="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                     stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5"></path>
                                </svg>
                            </i>
                            <span class="ml-2">客户开发计划</span>
                        </a>
                    </li>
                    <li class="px-3 pt-3 pb-2">
                        <span class="text-uppercase small font-weight-bold">服务管理</span>
                    </li>
                    <li class=" sidebar-layout">
                        <a href="/page/service" class="svg-icon">
                            <i class="">
                                <svg class="svg-icon" id="iq-chart-1" width="18" xmlns="http://www.w3.org/2000/svg"
                                     fill="none" viewbox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M8 13v-1m4 1v-3m4 3V8M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
                                          style="stroke-dasharray: 96, 116; stroke-dashoffset: 0;"></path>
                                </svg>
                            </i>
                            <span class="ml-2">服务创建</span>
                        </a>
                    </li>
                    <li class=" sidebar-layout">
                        <a href="/page/bill" class="svg-icon">
                            <i class="">
                                <svg class="svg-icon" id="iq-chart-1" width="18" xmlns="http://www.w3.org/2000/svg"
                                     fill="none" viewbox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M8 13v-1m4 1v-3m4 3V8M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
                                          style="stroke-dasharray: 96, 116; stroke-dashoffset: 0;"></path>
                                </svg>
                            </i>
                            <span class="ml-2">订单创建</span>
                        </a>
                    </li>
                </ul>
            </nav>
            <div class="pt-5 pb-5"></div>
        </div>
    </div>
    <div class="iq-top-navbar">
        <div class="iq-navbar-custom">
            <nav class="navbar navbar-expand-lg navbar-light p-0">
                <div class="side-menu-bt-sidebar">
                    <svg xmlns="http://www.w3.org/2000/svg" class="text-secondary wrapper-menu" width="30" fill="none"
                         viewbox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </div>
                <div class="d-flex align-items-center">
                    <div class="change-mode">
                        <div class="custom-control custom-switch custom-switch-icon custom-control-inline">
                            <div class="custom-switch-inner">
                                <p class="mb-0"></p>
                                <input type="checkbox" class="custom-control-input" id="dark-mode" data-active="true">
                                <label class="custom-control-label" for="dark-mode" data-mode="toggle">
	                                    <span class="switch-icon-right">
	                                        <svg xmlns="http://www.w3.org/2000/svg" id="h-moon" height="20" width="20"
                                                 class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
	                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                      d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
	                                        </svg>
	                                    </span>
                                    <span class="switch-icon-left">
	                                        <svg xmlns="http://www.w3.org/2000/svg" id="h-sun" height="20" width="20"
                                                 class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
	                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                      d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
	                                        </svg>
	                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div>HI!<a href="/page/contactChange">{{ .UserName }}</a></div>
                    <button class="navbar-toggler" type="button" data-toggle="collapse"
                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                            aria-label="Toggle navigation">
                        <svg xmlns="http://www.w3.org/2000/svg" class="text-secondary" width="30" fill="none"
                             viewbox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M4 6h16M4 12h16m-7 6h7"></path>
                        </svg>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ml-auto navbar-list align-items-center">
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <div class="content-page">
        <div class="container-fluid">
            <div class="row" id="main">
                <div class="col-md-12 mb-4 mt-1">
                    <div class="d-flex flex-wrap justify-content-between align-items-center">
                        <h3>主页</h3>
                    </div>
                </div>
                <div class="col-lg-8 col-md-12">
                    <div class="row" v-model="view">
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="">
                                            <p class="mb-2 text-secondary">客户总流量</p>
                                            <div class="d-flex flex-wrap justify-content-start align-items-center">
                                                <h5 class="mb-0 font-weight-bold">^{ view.totalCustomer }</h5>
                                                <p class="mb-0 ml-3 text-success font-weight-bold">Tod:
                                                    +^{ view.newTodayCustomer }</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="">
                                            <p class="mb-2 text-secondary">总流水</p>
                                            <div class="d-flex flex-wrap justify-content-start align-items-center">
                                                <h5 class="mb-0 font-weight-bold">￥^{ view.totalMoney }</h5>
                                                <p class="mb-0 ml-3 text-success font-weight-bold">
                                                    Mon:+^{ view.newMonthMoney }￥</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="">
                                            <p class="mb-2 text-secondary">月新增客户</p>
                                            <div class="d-flex flex-wrap justify-content-start align-items-center">
                                                <h5 class="mb-0 font-weight-bold">^{ view.newMonthCustomer }</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center flex-wrap">
                                        <h4 class="font-weight-bold">销售状况</h4>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <svg width="24" height="24" viewbox="0 0 24 24" fill="primary"
                                                     xmlns="http://www.w3.org/2000/svg">
                                                    <rect x="3" y="3" width="18" height="18" rx="2"
                                                          fill="#3378FF"></rect>
                                                </svg>
                                                <span>新增</span>
                                            </div>
                                            <div class="ml-3">
                                                <svg width="24" height="24" viewbox="0 0 24 24" fill="none"
                                                     xmlns="http://www.w3.org/2000/svg">
                                                    <rect x="3" y="3" width="18" height="18" rx="2"
                                                          fill="#19b3b3"></rect>
                                                </svg>
                                                <span>流失</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="chart-apex-column-01" class="custom-chart"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="font-weight-bold mb-3">服务总状态</h4>
                            <div id="chart-apex-column-03" class="custom-chart"></div>
                            <div class="d-flex justify-content-around align-items-center">
                                <div>
                                    <svg width="24" height="24" viewbox="0 0 24 24" fill="#808080"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <rect x="3" y="3" width="18" height="18" rx="2" fill="#808080"></rect>
                                    </svg>

                                    <span>未开始</span>
                                </div>
                                <div>
                                    <svg width="24" height="24" viewbox="0 0 24 24" fill="#00bfff"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <rect x="3" y="3" width="18" height="18" rx="2" fill="#00bfff"></rect>
                                    </svg>

                                    <span>已开始</span>
                                </div>
                            </div>
                            <div class="d-flex justify-content-around align-items-center mt-3">
                                <div>
                                    <svg width="24" height="24" viewbox="0 0 24 24" fill="#db7e06"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <rect x="3" y="3" width="18" height="18" rx="2" fill="#db7e06"></rect>
                                    </svg>

                                    <span>进行中</span>
                                </div>
                                <div>
                                    <svg width="24" height="24" viewbox="0 0 24 24" fill="#3cb72c"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <rect x="3" y="3" width="18" height="18" rx="2" fill="#3cb72c"></rect>
                                    </svg>

                                    <span>已完成</span>
                                </div>
                            </div>
                            <div class="d-flex justify-content-around align-items-center mt-3">
                                <div>
                                    <svg width="24" height="24" viewbox="0 0 24 24" fill="#e60000"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <rect x="3" y="3" width="18" height="18" rx="2" fill="#e60000"></rect>
                                    </svg>
                                    <span>中断</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Page end  -->
    </div>
</div>
<!-- Wrapper End-->
<footer class="iq-footer">
</footer>    <!-- Backend Bundle JavaScript -->
<script src="/static/js/backend-bundle.min.js"></script>
<!-- Chart Custom JavaScript -->
<script src="/static/js/customizer.js"></script>

<script src="/static/js/sidebar.js"></script>

<!-- Flextree Javascript-->
<script src="/static/js/flex-tree.min.js"></script>
<script src="/static/js/tree.js"></script>

<!-- Table Treeview JavaScript -->
<script src="/static/js/table-treeview.js"></script>

<!-- SweetAlert JavaScript -->
<script src="/static/js/sweetalert.js"></script>

<!-- Vectoe Map JavaScript -->
<script src="/static/js/vector-map-custom.js"></script>

<!-- Chart Custom JavaScript -->
<script src="/static/js/chart-custom.js"></script>
<script src="/static/js/01.js"></script>
<script src="/static/js/02.js"></script>

<!-- slider JavaScript -->
<script src="/static/js/slider.js"></script>

<!-- Emoji picker -->
<script src="/static/js/index.js" type="module"></script>


<!-- app JavaScript -->
<script src="/static/js/app.js"></script>

<!--vue axion-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->
<script src="/static/js/vue.js"></script>
<script src="/static/js/axios-0.18.0.js"></script>
<script>
    new Vue({
        delimiters: ['^{', '}'],
        el: "#main",
        data: {
            view: {
                totalCustomer: 0,//总客户
                newTodayCustomer: 0,//今日新增客户
                newMonthCustomer: 0,//每月新增客户
                totalMoney: 0.0,//总流水
                newMonthMoney: 0.0, //月增流水
            },
            cycleView: [],//总服务状态饼状图
            columnView: {
                newCustomers: [],
                lostCustomers: [],
                dates: []
            }
        },
        methods: {
            viewCycleDate() {
                const __this = this;
                (function (jQuery) {
                    const _this = __this;
                    "use strict";
                    if (jQuery("#chart-apex-column-03").length) {
                        var options = {
                            series: _this.cycleView,
                            chart: {
                                height: 330,
                                type: 'donut',

                            },
                            labels: ["中断", "未开始", "已开始", "进行中", "已完成"],
                            colors: ['#e60000', '#808080', '#00bfff', '#db7e06', '#3cb72c'],
                            plotOptions: {
                                pie: {
                                    startAngle: -90,
                                    endAngle: 270,
                                    donut: {
                                        size: '80%',
                                        labels: {
                                            show: true,
                                            total: {
                                                show: true,
                                                color: '#BCC1C8',
                                                fontSize: '18px',
                                                fontFamily: 'DM Sans',
                                                fontWeight: 600,
                                            },
                                            value: {
                                                show: true,
                                                fontSize: '25px',
                                                fontFamily: 'DM Sans',
                                                fontWeight: 700,
                                                color: '#8F9FBC',
                                            },
                                        }
                                    }
                                }
                            },
                            dataLabels: {
                                enabled: false,
                            },
                            stroke: {
                                lineCap: 'round'
                            },
                            grid: {
                                padding: {

                                    bottom: 0,
                                }
                            },
                            legend: {
                                position: 'bottom',
                                offsetY: 8,
                                show: true,
                            },
                            responsive: [{
                                breakpoint: 480,
                                options: {
                                    chart: {
                                        height: 268
                                    }
                                }
                            }]
                        };

                        var chart = new ApexCharts(document.querySelector("#chart-apex-column-03"), options);
                        chart.render();

                        const body = document.querySelector('body')
                        if (body.classList.contains('dark')) {
                            apexChartUpdate(chart, {
                                dark: true
                            })
                        }

                        document.addEventListener('ChangeColorMode', function (e) {
                            apexChartUpdate(chart, e.detail)
                        })
                    }


                })(jQuery)
            },
            columnsView() {
                var __this1 = this;
                (function (jQuery) {
                    "use strict";
                    var _this1 = __this1;
                    if (jQuery("#chart-apex-column-01").length) {
                        var options = {
                            series: [{
                                name: '新增',
                                data: _this1.columnView.newCustomers
                            }, {
                                name: '流失',
                                data: _this1.columnView.lostCustomers
                            }],
                            colors: ['#3378FF', '#19b3b3'],
                            chart: {
                                height: 265,
                                fontFamily: 'DM Sans',
                                toolbar: {
                                    show: false,
                                },
                                type: 'area'
                            },
                            dataLabels: {
                                enabled: false
                            },
                            stroke: {
                                curve: 'smooth'
                            },
                            fill: {
                                type: 'gradient',
                                gradient: {
                                    shade: 'light',
                                    type: "vertical",
                                    shadeIntensity: 0.5,
                                    // gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
                                    inverseColors: false,
                                    opacityFrom: .8,
                                    opacityTo: .2,
                                    stops: [0, 50, 100],
                                    colorStops: []
                                }
                            },
                            grid: {
                                xaxis: {
                                    lines: {
                                        show: false
                                    }
                                },
                                yaxis: {
                                    lines: {
                                        show: false
                                    }
                                }
                            },
                            yaxis: {
                                labels: {
                                    offsetY: 0,
                                    minWidth: 20,
                                    maxWidth: 20
                                },
                            },
                            xaxis: {
                                type: 'datetime',
                                labels: {
                                    minHeight: 20,
                                    maxHeight: 20
                                },
                                categories: _this1.columnView.dates
                            },
                            tooltip: {
                                x: {
                                    format: 'dd/MM/yy'
                                },
                            },
                        };

                        var chart = new ApexCharts(document.querySelector("#chart-apex-column-01"), options);
                        chart.render();
                    }
                })(jQuery)
            },
            getView() {
                var _this = this;
                axios.get('/getView') // 替换为你的后端API URL
                    .then(response => {
                        console.log(response.data);
                        _this.view = response.data.date; // 将获取到的数据赋值给customers
                    })
                    .catch(error => {
                        console.error('Error fetching data:', error);
                    });
            },
            getColumnView() {
                var _this = this;
                axios.get('/getColumnView') // 替换为你的后端API URL
                    .then(response => {
                        console.log(response.data);
                        _this.columnView = response.data.date;
                        this.columnsView()
                    })
                    .catch(error => {
                        console.error('Error fetching data:', error);
                    });
            },
            getCycleView(){
                var _this = this;
                axios.get('/getCycleView') // 替换为你的后端API URL
                    .then(response => {
                        console.log(response.data);
                         _this.cycleView = response.data.date.cycleView;
                        this.viewCycleDate()
                    })
                    .catch(error => {
                        console.error('Error fetching data:', error);
                    });
            }

        },
        mounted() {
            this.getView()
            this.getColumnView()
            this.getCycleView()
        }
    });
</script>

<script>

</script>
</body>
</html>